import React, { Component } from 'react'
// 面试题? 请问setSatte 该修改state 数据的方式是同步还是异步?
// setState 为异步方式
// 但是: 在react 18之前  setState该方法既是异步还可以是同步
// react18之前同步的情形:
// 情形1: 当 this.setState()该方法写在延时定时器中时, 他是同步
// 情形2: 当 this.setState() 该方法写在原生的js事件中的时候, 他是同步

// react 18之后,都是异步

// 如果要想获取最新的数据或dom 节点, 应该在this.setSatate(修改操作,回调函数)
// 回调函数: 当数据更新后, 触发的函数
export default class Mycls3 extends Component {
    state = {
        num: 100,
        count: 999,
        age: 120
    }
    render() {
        return (
            <>
                <div onClick={() => {
                    // this.setState({
                    //     num: this.state.num + 1
                    // })

                    // 获取num得值
                    //console.log(this.state.num)

                    // 在定时器中测试
                    // setTimeout(() => {
                    //     this.setState({
                    //         num: this.state.num + 1
                    //     })

                    //     // 获取num得值
                    //     console.log(this.state.num)
                    // }, 0)


                }}>num:{this.state.num}</div>
                <div>count:{this.state.count}</div>
                <div onClick={() => {
                    this.setState({
                        age: this.state.age + 1
                    }, () => {
                        console.log(this.state.age)
                        console.log(document.querySelector('.age').innerHTML)
                    })
                    console.log(document.querySelector('.age').innerHTML)

                }} className='age'>age:{this.state.age}</div>
            </>
        )
    }
}
